<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>电影票</title>
    <!--导入css包-->
    <link type="text/css" rel="stylesheet" href="css/step.css"/>
	<link rel="stylesheet" href="css/icomoon.css" />
	<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/index.css" />
	<!--导入JS包-->
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/progressStep.js"></script>
    <script type="text/javascript" src="js/raphael.js"></script>
	<script type="text/javascript" src="js/icomoon.js"></script>
    
<script type="text/javascript">
	$(document).ready(function () {
		var $progressDiv = $("#progressBar");
		var $progressBar = $progressDiv.progressStep();
		$progressBar.addStep("浏览影片");
		$progressBar.addStep("选择场次");
		$progressBar.addStep("选择座位");
		$progressBar.addStep("提交订单");
		$progressBar.addStep("查看订单");
		
		//控制步骤
		$progressBar.setCurrentStep(3);
		$progressBar.refreshLayout();
	});
</script>
</head>

<body>
	<header class="navbar navbar-inverse navbar-static-top" role="navigation">
     <div class="container ">
    	<nav class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">VeryEdu 影院订票系统</a>
  		</nav>
       </div>
    </header>
   
   <section class="container">
    	<nav id="progressBar" style="height:80px;margin-top:0px;"></nav>
				<div class="col-xs-12 col-sm-8">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="thumbnail">
                              <img src="images/ticket.gif" class="img-responsive" width="100%" height="100%">
                              <h5 style="position:absolute; top:110px; left: 95px;">风暴</h5>
                              <h5 style="position:absolute; top:70px; left: 95px;">1号大厅</h5>                      
                              <h5 style="position:absolute; top:70px; left: 205px;">1排8号</h5>                  
                              <h5 style="position:absolute; top:145px; left: 80px;">2013-12-31</h5>                  
                              <h5 style="position:absolute; top:145px; left: 170px;">19:30</h5>                  
                              <h5 style="position:absolute; top:145px; left: 250px;">65元</h5>
                            </div>
                        </div>    
                        
                        <div class="col-md-6">
                            <div class="thumbnail">
                              <img src="images/ticket.gif" class="img-responsive" width="100%" height="100%">
                              <h5 style="position:absolute; top:110px; left: 95px;">风暴</h5>
                              <h5 style="position:absolute; top:70px; left: 95px;">1号大厅</h5>                      
                              <h5 style="position:absolute; top:70px; left: 205px;">1排8号</h5>                  
                              <h5 style="position:absolute; top:145px; left: 80px;">2013-12-31</h5>                  
                              <h5 style="position:absolute; top:145px; left: 170px;">19:30</h5>                  
                              <h5 style="position:absolute; top:145px; left: 250px;">65元</h5>
                            </div>
                        </div>    
                        
                        
                            
                    </div>
                </div>
                
                <div class="col-xs-6 col-sm-4 sidebar-offcanvas"  id="memo">
                            <div class="thumbnail">
                              <img src="images/fengbao.jpg" class="img-responsive" width="100%">
                              <div class="caption text-left" >
                                <h4 class="text-center">风暴</h4>
							                 	<h4>票价：38元/张</h4>
								                <h4>票数：3</h4>
								                <hr />
								                <h4>总计：<font size="+2" color="F78404">￥114</font></h4>
								                <h4 class="text-center">
                                 <a href="selectSeat.html" class="btn btn-primary" role="button">确认订票</a>                                </h4>
                              </div>
                            </div>
                        </div>
   </section>

    <footer class="text-center">
        <p >&copy;company 2014</p>
    </footer>
</body>
</html>
